﻿$(function () {
  $('#slider2').anythingSlider({
    onInitialized: function(e, slider) {
      var i, s,
          $tooltip = $('<div class="thumbs"></div>').appendTo( slider.$controls );
      slider.$controls.find('li').on('mouseover mouseleave', function(e){
        $tooltip.toggle(e.type === 'mouseover');
        i = slider.$items.eq($(this).index()+1).find('img');
        s = i.attr('src');
        if (s) {
          $tooltip
            .html('<img src="' + s + '">')
            .css({
              left: $(this).position().left - 40 // 1/2 thumb width
            });
        } else {
          $tooltip.empty();
        }
      });
    }
  });
});